<template>
  <div class="doc-main">
    <div class="main-nav">
      <div class="nav-page">
        <el-page-header @back="goBack" content="项目文档" />
      </div>
      <div class="nav-search">
        <el-input v-model="list.filters.search" placeholder="请输入搜索内容" clearable suffix-icon="el-icon-search" size="medium" @input="getSearch"></el-input>
      </div>
      <div class="nav-btn">
        <el-button size="mini" type="primary" :loading="loading" class="el-icon-plus" @click="add()"> 新增</el-button>
      </div>
      <div class="nav-tree">
        <div class="tree-item " :class="{ active: current.id === item.id }" v-for="item in list.data" :key="item.id" @click="changeTab(item)">
          <div class="tree-item-title">
            <i class="el-icon-document pad"></i>
            <span>{{ item.name }}</span>
          </div>
          <i class="el-icon-delete" @click="comDelete(item.id)"></i>
        </div>
      </div>
    </div>
    <template v-if="type === 'preview'">
      <preview :list="list" :type.sync="type" :currentDoc.sync="current" />
    </template>
    <template v-else>
      <edit :type.sync="type" :currentDoc.sync="current" />
    </template>
  </div>
</template>

<script>
import Preview from './Preview'
import Edit from './Edit'
export default {
  name: 'docProject',
  components: {
    Preview,
    Edit
  },
  data () {
    return {
      type: 'preview',
      visible: false,
      loading: false,
      list: {
        data: [],
        loading: false,
        filters: {
          search: '',
          prop: '',
          order: ''
        }
      },
      current: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeTab(item) {  // tab 选项卡切换
      this.current = item
      this.type = 'preview'
    },
    getSearch () {
      this.getList()
    },
    goBack() {
      this.$router.push({ path: '/info/project' })
    },
    getList () { // 获取项目文档列表
      this.list.loading = true
      this.$API({
        name: 'GetProjectDocumentList',
        params: {
          pid: this.$route.params.id,
          search: this.list.filters.search,
          order: this.list.filters.prop,
          sort: this.list.filters.order
        },
        requireAuth: true
      }).then (res => {
        if (res.data.code === 200) {
          this.list.data = res.data.data.data
          if (this.list.data.length > 0) {
            this.current = this.list.data[0]
          }
        } else {
          this.$message.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.list.loading = false
      })
    },
    add () { // 新增
      this.loading = true
      const params = {
        pid: this.$route.params.id,
        name: '未命名文档',
        content: ''
      }
      this.$API({
        name: 'AddProjectDocument',
        data: params,
        requireAuth: true
      }).then(res => {
        if (res.data.code === 200) {
          this.$notify.success(res.data.msg)
          this.getList()
        } else {
          this.$notify.error(res.data.msg)
        }
      }).catch(error => {
        this.$message.error(error)
      }).finally(() => {
        this.loading = false
      })
    },
    comDelete (id) { // 删除
      this.$confirm('此操作将删除该文档, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$API({
          name: 'DeleteProjectDocument',
          paths: [id],
          requireAuth: true
        }).then (res => {
          if (res.data.code === 200 && res.data.data === 1) {
            this.$notify.success(res.data.msg)
          } else {
            this.$notify.error(res.data.msg)
          }
        }).catch(error => {
          this.$message.error(error)
        }).finally(() => {
          this.getList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss">
.doc-main {
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  box-sizing: border-box;
  .main-nav {
    padding-top: 10px;
    width: 240px;
    overflow-y: auto;
    flex-shrink: 0;
    border-right: 1px solid #e3e9ed;
    .nav-page {
      padding-left: 10px;
    }
    .nav-search {
      margin: 10px;
    }
    .nav-btn {
      margin-right: 10px;
      display: flex;
      flex-direction: row-reverse;
      margin-bottom: 10px;
    }
    .nav-tree {
      .tree-item {
        width: 100%;
        padding: 10px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        color: #777;
        .tree-item-title {
          width: calc(100% - 16px);
          display: flex;
          span {
            display: inline-block;
            width: calc(100% - 16px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        span {
          font-size: 14px;
        }
        .pad {
          margin-right: 10px;
        }
        &:hover {
          background-color: #fafafa;
        }
      }
      .active {
        background-color: #f4f6f8;
        span {
          color: #3a8ee6;
        }
        &:hover {
          background-color: #f4f6f8;
        }
      }
    }
  }
  .main-contain {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    .contain-header {
      flex-shrink: 0;
      height: 70px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e3e9ed;
      background: #FCFCFC;
      padding: 20px;
      .header-left {
        .left-name {
          font-weight: bold;
          font-size: 18px;
          margin-bottom: 10px;
        }
        .left-time {
          color: #777;
          font-size: 12px;
        }
      }
    }
    .contain-content {
      height: auto;
      overflow-y: auto;
    }
  }
}
</style>